<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .box{
        background-color: #f1f3f4;
        color: gray;
        width: 400px;
        margin: auto;
        margin-top: 100px;
        line-height: 50px;
        text-align: center;
        border:gray;
        border-radius: 10px;
        border-color: gray;
        box-shadow:10px 10px 20px 10px #767676;
    }
    #registerBtn{
        border: 1px solid #398dee;
        width: 60%;
        height:38px;
        background-color: #398dee;
        border-radius: 20px;
    }
</style>
<body>
    <div class="box">
        <h2>明德软件系统注册_Ajax</h2>
        <p>
            用户名： <input type="text" id="username">
        </p>
        <p>
            邮 箱： &nbsp;&nbsp;&nbsp;<input type="text" id="email">
        </p>
        <p>
            密 码： &nbsp;&nbsp;&nbsp;<input type="password" id="password">
        </p>
        <p>
            重复密码:<input type="password" id="repassword">
        </p>
        <p>
            <button id="registerBtn">注册</button>
        </p>
    </div>
</body>
<script src="/static/js/jquery.js"></script>
<script src="/static/plugins/layer/layer.js"></script>
<script>
    let isValidEmail = false; // 邮箱默认不可用
    // 失去焦点校验邮箱是否被占用
    $("#email").on('blur', function () {
        let email = $(this).val();
        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(email)) {
            layer.msg("邮箱格式非法")
            return;
        }
        email = encode(email);
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {

                let data = JSON.parse(this.responseText)
                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    isValidEmail = true
                    layer.msg(message)
                } else {
                    isValidEmail = false;
                    layer.msg(message)
                }
            }
        }
        xhr.open('post', '/ajaxemail', true)

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        let formData = `email=${email}`
        xhr.send(formData)
    })


    // 注册事件
    $("#registerBtn").on('click', function () {
        // 1. 获取表单内的值
        let username = $("#username").val();
        let email = $("#email").val();
        let password = $("#password").val();
        let repassword = $("#repassword").val();
        // 2. 校验。。。。
        if ([username, email, password, repassword].includes('')) {
            layer.msg("不能为空")
            return;
        }

        if (!/^\w+@(?:\w+\.)+[a-zA-Z]{2,6}$/.test(email)) {
            layer.msg("邮箱格式非法")
            return;
        }


        if (password !== repassword) {
            layer.msg("前后密码不一致")
            return;
        }

        username = encode(username);
        email = encode(email);
        password = encode(password);
        repassword = encode(repassword);
        // 3. 发送ajax请求
        if (!isValidEmail) {
            layer.msg('邮箱不可用')
            return;
        }
        $(this).prop('disabled', true).html('注册中...')
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                $(this).prop('disabled', false).html('注册')

                let data = JSON.parse(this.responseText)
                let { code, message } = data;
                layer.msg(message);
                if (code === 20000) {
                    location.href = "/login"
                }
            }
        }
        xhr.open('post', '/ajaxregister', true)

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
        let formData = `username=${username}&email=${email}&password=${password}&repassword=${repassword}`
        xhr.send(formData)
    })

    // 对数据进行编码
    function encode(value) {
        return encodeURIComponent(value)
    }
</script>

</html>